<template>
  <div>
<!--    <el-card style='margin-bottom: 10px'>-->
      <!-- <el-form ref="form" class="box-card" :inline="true" :model="form">
        <div class="formtop">
          <el-form-item label="起始">
            <el-date-picker
              v-model="form.date1"
              size="mini"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="截至">
            <el-date-picker
              v-model="form.date2"
              size="mini"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="" label-width="0">
            <el-button
              class="h50"
              size="mini"
              type="primary"
              icon="el-icon-search"
              @click="seach"
            />
          </el-form-item>
        </div>
      </el-form> -->
<!--    </el-card>-->
    <!--  视频列表  -->
    <el-tabs v-model='activeName' type='card' @tab-click='handleClick'>
      <el-tab-pane name='net'>
        <span slot='label'><i class='el-icon-s-grid fs' /></span>
        <div v-if="activeName === 'net'">
          <!-- 视频列表 -->
          <div class='videoList'>
            <div v-for='i in tableData' :key='i' class='videoItem'>
              <iframe
                :src="
                  '/page/video.html?url=' +
                  'https://open.ys7.com/v3/openlive/C38838007_1_2.m3u8?expire=1657959425&id=337991384669601792&t=227e7c411dbc689fe3e6f878077610840e6ad583021e72faed76fd41614a7352&ev=100'
                "
                frameborder='0'
                width='100%'
                height='200'
              />
            </div>
          </div>
          <!--   分页   -->
          <el-pagination
            style='float: right'
            :page-size='10'
            :current-page='formInline.offset'
            layout='total, prev, pager, next, jumper'
            :total='total'
            @current-change='handleCurrentChange'
          />
        </div>
      </el-tab-pane>
      <el-tab-pane name='table'>
        <span slot='label'><i class='el-icon-s-unfold fs' /></span>
        <div v-if="activeName === 'table'">
          <!--  table  -->
          <el-table
            :data='tableData'
            style='width: 100%; margin-top: 20px'
            size='mini'
          >
            <el-table-column prop='site_id' label='站点id' align='center' />
            <el-table-column
              prop='device_name'
              label='设备名称'
              align='center'
            />
            <el-table-column
              prop='device_num'
              label='设备序列号'
              align='center'
            />
            <el-table-column
              prop='device_user'
              label='设备用户名'
              align='center'
            />
            <el-table-column prop='address' label='安装地址' align='center' />
            <el-table-column
              fixed='right'
              label='操作'
              width='300'
              align='center'
            >
              <template slot-scope='scope'>
                <el-button
                  type='primary'
                  size='mini'
                  @click='videoInfo(scope.row)'
                >
                  实时查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--   分页   -->
          <el-pagination
            style='float: right'
            :page-size='10'
            :current-page='formInline.offset'
            layout='total, prev, pager, next, jumper'
            :total='total'
            @current-change='handleCurrentChange2'
          />
        </div>
      </el-tab-pane>
      <el-tab-pane name='swiper'>
        <span slot='label'><i class='el-icon-video-camera-solid fs' /></span>
        <div v-if="activeName === 'swiper'">
          <div class='swiperBox'>
            <el-carousel
              type='card'
              height='500px'
              :autoplay='false'
              :indicator-position='none'
            >
              <!-- indicator-position="outside" -->
              <el-carousel-item v-for='item in tableData' :key='item'>
                <iframe
                  :src="
                    '/page/video.html?url=' +
                    'https://open.ys7.com/v3/openlive/C38838007_1_2.m3u8?expire=1657959425&id=337991384669601792&t=227e7c411dbc689fe3e6f878077610840e6ad583021e72faed76fd41614a7352&ev=100'
                  "
                  frameborder='0'
                  width='100%'
                  height='500'
                />
              </el-carousel-item>
            </el-carousel>
          </div>
          <!--   分页   -->
          <el-pagination
            style='float: right'
            :page-size='10'
            :current-page='formInline.offset'
            layout='total, prev, pager, next, jumper'
            :total='total'
            @current-change='handleCurrentChange'
          />
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 视频弹出框播放 -->
    <div v-if='videoFlag'>
      <VideoDialog
        :video-flag='videoFlag'
        :video-src='videoSrc'
        @close='close'
      />
    </div>
  </div>
</template>
<script>
import { videoFileList } from '@/api/fileManage.js'
import VideoDialog from './videoDialog'

export default {
  name: 'content',
  components: {
    VideoDialog,
  },
  props: {
    choseData: {
      type: Object,
      default: () => {
      },
    },
  },
  data() {
    return {
      videoSrc: '123', // 直播地址
      videoFlag: false, // 直播弹窗
      activeName: 'net', // tab数据
      tableData: [], // 表格数据
      form: {
        name: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        date1: '',
        date2: '',
      },
      // 搜索表单
      total: 0, // 数据总量
      formInline: {
        sort: 'created_at',
        offset: 0,
        limit: 10,
        order: 'ascending',
        device_name: null,
        site_id: null,
      },
    }
  },
  watch: {
    // 树形数据
    choseData(nVal, oVal) {
      this.formInline.site_id = nVal.id
      this.getVideos()
    },
  },
  created() {
    this.formInline.site_id = this.choseData.id
    this.getVideos()
    console.log(' choseData', this.choseData)
    this.form.date1 = this.getDay(-1)
    this.form.date2 = this.getDay(0)
  },
  methods: {
    /**
     * @description: 查看直播视频
     * @author: 书童
     */
    videoInfo(item) {
      this.videoFlag = true
      this.videoSrc =
        'https://open.ys7.com/v3/openlive/C38838007_1_2.m3u8?expire=1657959425&id=337991384669601792&t=227e7c411dbc689fe3e6f878077610840e6ad583021e72faed76fd41614a7352&ev=100'
    },
    /**
     * @description: 获取所有监控数据
     * @author: 书童
     */
    getVideos() {
      videoFileList(this.formInline).then((res) => {
        console.log('打印res', res)
        this.tableData = res.data.videos
        this.total = res.data.total
      })
    },
    /**
     * @description: 切换tab
     * @author: 书童
     */
    handleClick() {
      console.log('切换tab')
    },
    // 获取顶部参数查询
    getTopSearch() {
      // electricityParameters(this.choseData.id, 0).then(res => {
      //   console.log(res)
      // })
    },
    // 跳转
    handleCurrentChange2(val) {
      this.formInline.offset = val
      this.getVideos()
    },
    /**
     * @description: 获取当前日期
     * @author: hst
     * @param: day: 0今天，-1昨天
     */
    getDay(day) {
      var today = new Date()
      var targetday = today.getTime() + 1000 * 60 * 60 * 24 * day
      today.setTime(targetday)
      var tYear = today.getFullYear()
      var tMonth = today.getMonth()
      var tDate = today.getDate()
      tMonth = this.doHandleMonth(tMonth + 1)
      tDate = this.doHandleMonth(tDate)
      return tYear + '-' + tMonth + '-' + tDate
    },

    doHandleMonth(month) {
      var m = month
      if (month.toString().length === 1) {
        m = '0' + month
      }
      return m
    },

    // 关闭弹窗
    close() {
      this.videoFlag = false
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep .el-tabs__nav-scroll {
  float: right;
}

::v-deep .tableHead {
  background-color: #edf1f8 !important;
}

.box-card {
  height: 30px;
}

.videoList {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;

  .videoItem {
    width: 25%;
  }
}

.swiperBox {
  width: 100%;
  height: 500px;
}

.h100 {
  height: 100%;
}

.fs {
  font-size: 20px;
}

.h50 {
  height: 28px;
}

.formtop {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
}

.formRight {
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  div {
    height: 35px;
    margin: 0 10px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #838ea0;
  }

  .active {
    height: 35px;
    background: linear-gradient(90deg, #3494ff, #006dff);
    box-shadow: 0px 6px 12px 0px rgba(35, 113, 255, 0.29);
    border-radius: 17px;
    color: #ffffff;
    padding: 0px 25px;
  }
}

.chart {
  width: 100%;
  height: 480px;
}

.tableBox {
  width: 1140px;
  margin: 20px auto;
}

.warningBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 1140px;
  height: 54px;
  border: 1px solid #cecdcd;
  background: #f1f1f1;
  border-radius: 10px;
  font-size: 14px;
  padding: 15px;
  margin: 10px auto;

  .left {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background-color: #333333;
    margin-right: 10px;
  }

  .right {
    font-size: 14px;
  }
}
</style>
